<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/code.js"></script>
  <style>
    #createCode {
      user-select: none;
    }

    .right {
      font-size: 12px;
      color: green;
    }

    .err {
      font-size: 12px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>
      <label for="">用户名:</label>
      <input type="text" id="user">
      <span id="user_span"></span>
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" id="pwd">
      <span id="pwd_span"></span>
    </p>
    <p>
      <label for="">手机号:</label>
      <input type="password" id="phone">
      <span id="phone_span"></span>
    </p>
    <p>
      <label for="">邮&emsp;箱:</label>
      <input type="password" id="email">
      <span id="email_span"></span>
    </p>
    <p>
      <label for="">验证码:</label>
      <input type="text" id="code">
      <span id="createCode">a1b2</span>
      <span id="code_span"></span>
    </p>
    <p>
      <input id="btn" type="submit" value="注册">
      <input id="btn" type="reset" value="注册">
    </p>
  </div>
</body>
<script>
      // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序 
    // a. 长度  6-12位 
    // b. 不能以数字开头
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _    6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  A1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3 

    // 确认密码  
    // 和密码相同  

    // 验证码  => 封装一个方法可以随机生成四位验证码 (0-9 a-z A-Z )
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )   => createCode
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 
</script>
<script>
  // 1. JS操作元素之前必须先获取元素
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  var pwdInp = document.getElementById("pwd");
  var pwdSpan = document.getElementById("pwd_span");
  var repwdInp = document.getElementById("repwd");
  var repwdSpan = document.getElementById("repwd_span");
  var codeInp = document.getElementById("code");
  var codeSpan = document.getElementById("code_span");
  var createCode = document.getElementById("createCode");

  var btn = document.getElementById("btn");

  createCode.innerText = randCode();
  createCode.onclick = function () {
    createCode.innerText = randCode();
  }

  // 一步到位
  // userInp.onblur = function(){
  //     var user = userInp.value.trim();
  //     userInp.value = user;

  //     var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;

  //     if(userReg.test(user)){
  //         userSpan.textContent ="√";
  //         Object.assign(userSpan.style,{
  //             fontSize:"12px",
  //             color:"green",
  //         })
  //     }else{
  //         userSpan.textContent ="用户名由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
  //         userSpan.className = "err";
  //     }
  // }

  // 分开判断
  // 判断的流程  从易到难的顺序 
  // a. 长度  6-12位 
  // b. 不能以数字开头
  // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)

  userInp.onblur = function () {
    var user = userInp.value.trim();
    userInp.value = user;

    var lenReg = /^.{6,12}$/;
    var startReg = /^[^0-9]/;
    var illReg = /[^\w$]/;   // 是否含有非法字符

    if (lenReg.test(user)) {
      if (startReg.test(user)) {
        if (!illReg.test(user)) {
          userSpan.textContent = "√";
          userSpan.className = "right";
        } else {
          userSpan.textContent = "用户名由数字,大小写字母,下划线,$组成";
          userSpan.className = "err";
        }
      } else {
        userSpan.textContent = "用户名不能以数字开头";
        userSpan.className = "err";
      }
    } else {
      userSpan.textContent = "用户名需要在6-12位之间";
      userSpan.className = "err";
    }

    if (!lenReg.test(user)) { // lenReg.test(user) == false
      userSpan.textContent = "用户名需要在6-12位之间";
      userSpan.className = "err";
    } else if (!startReg.test(user)) {  //startReg.test(user) == false
      userSpan.textContent = "用户名不能以数字开头";
      userSpan.className = "err";
    } else if (illReg.test(user)) {  //illReg.test(user) == true 含有非法字符
      userSpan.textContent = "用户名由数字,大小写字母,下划线,$组成";
      userSpan.className = "err";
    } else {
      userSpan.textContent = "√";
      userSpan.className = "right";
    }
  }



</script>


</html>